  <!DOCTYPE html>
  <html>
    <head>

      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta charset="utf-8">
    </head>

    <body>
      
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>

      <nav class="myNav">
      <div class="nav-wrapper light-green darken-4">
        <a href="" class="brand-logo"> 武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="">景点</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">厕所</a></li>
          <li><a href="">新闻</a></li>
          <li><a href="">广播</a></li>
          <li><a href="">反馈</a></li>
          <li><a href="">设置</a></li>
        </ul>
      </div>
      </nav>
      <div id="container">
      <input type="date" class="datepicker">
    </div>
      <table class="highlight responsive-table " >
        <thead>
          <tr>
              <th data-field="title">标题</th>
              <th data-field="author">作者</th>
              <th data-field="date">日期</th>
          </tr>
        </thead>
        <tbody>
          <tr>
              <td><a class="modal-trigger aColor" href="#modal1">热烈欢迎中央领导前来参观</a></td>
              <td>王</td>
              <td>2016-2-19</td>
          </tr>                                                            
        </tbody>
      </table>

      <div id="modal1" class="modal">
        <div class="modal-content">

          <div class="input-field">
            <input value="热烈欢迎中央领导前来参观" id="mTitle" type="text" class="validate">
            <label for="mTitle">标题</label>
          </div>
          <div class="input-field">
            <input value="小王" id="mAuthor" type="text" class="validate">
            <label for="mAuthor">作者</label>
          </div>  
          
            <div class="input-field ">
              <input id="id_for_label" type="date" class="datepicker validate">
              <label for="id_for_label">{{ event_form.end_date.label }}</label>
            </div>

          

        </div>
      </div>

      <script>
        $(document).ready(function(){
            $('.modal-trigger').leanModal();
            var $input = $('.datepicker').pickadate({
          selectMonths: true, // Creates a dropdown to control month
          selectYears: 15 // Creates a dropdown of 15 years to control year
          container: '#container',
          onClose: function () {
            alert("hello");
          },
          closeOnSelect: false,
            closeOnClear: false,
        });
        var picker = $input.pickadate('picker')
        });



      </script>
    </body>
  </html>